import { ref } from 'vue';
import pageModal from '@/components/page-modal';

type CallBackFn = (item?: any) => void;

/* 监听pageContent的事件
@pageContentEditBtnClick="pageContentEditBtnClick"
@pageContentCreateBtnClick="pageContentCreateBtnClick"
 */

/*
添加page-modal的属性
:defaultInfo="defaultInfo"
ref="pageModalRef"
 */

// 这个函数的作用仅仅时显示dialog并且展示需要回溯的内容
export function usePageModal(
  createCb?: CallBackFn | null,
  editCb?: CallBackFn | null,
  dialogName?: string[]
) {
  const pageModalRef = ref<InstanceType<typeof pageModal>>();
  const defaultInfo = ref({});
  // 点击添加显示弹窗, 从page-content里面传出来的事件
  const pageContentCreateBtnClick = () => {
    defaultInfo.value = {}; // 新建用户的form表单是空的, 留给用户输入.
    if (pageModalRef.value) {
      pageModalRef.value.centerDialogVisible = true; // 显示dialog
      if (dialogName) {
        pageModalRef.value.dialogTitleName = dialogName[0]; // 改变dialog的title
      }
    }
    createCb && createCb();
  };
  // 点击编辑显示弹窗,需要回溯已有的内容
  const pageContentEditBtnClick = (item: any) => {
    // item里面放的就是被点击的哪个数据的值
    defaultInfo.value = { ...item }; // 拿到这条数据原来得值, 再父传子传给page-modal
    if (pageModalRef.value) {
      pageModalRef.value.centerDialogVisible = true; // 显示dialog
      if (dialogName) {
        pageModalRef.value.dialogTitleName = dialogName[1]; // 改变dialog的title
      }
    }
    editCb && editCb(item);
  };

  return [
    pageModalRef,
    defaultInfo,
    pageContentCreateBtnClick,
    pageContentEditBtnClick
  ];
}
